<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>银行卡设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="bank-card-setting">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addCard">添加银行卡</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :data="cardList"></search-form>
        </div>
      </search-btn-view>

      <div class="card-setting-table-div">
        <el-table fit stripe border :data="searchCardList" style="width: 100%" height="parent">
          <el-table-column label="银行卡号" prop="bankCardNumber" min-with="140px" header-align="center"></el-table-column>
          <el-table-column label="所属银行" prop="bank" min-with="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('financeMgr.bankCardSetting.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="余额" prop="balance" min-with="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status===1" size="mini" type="danger" @click="updateStatus(scope.row,2)">禁用</el-button>
              <el-button v-else size="mini" type="primary" @click="updateStatus(scope.row,1)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog append-to-body title="添加银行卡" :visible.sync="openForm" width="80%" top="calc(50vh - 160px)" custom-class="bank-card-setting-dialog">
      <div style="height:250px;overflow:auto">
        <card-form v-if="openForm" :card="selectCard" @save-success="saveSuccess"></card-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "./css/cardForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/static/vue/bankcardinfo.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="./searchForm.js"></script>
<script src="./cardForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    data: function () {
      var search = {
        bankCardNumber: '',
        bank: '',
        status: ''
      };
      return {
        loading: false,
        cardList: [],
        searchCardList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        openForm: false,
        selectCard: null,
        i18n: i18n
      };
    },

    created: function () {
      this.setCardList(true);
    },

    methods: {
      setCardList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var self = this;
        this.loading = true;
        return ajaxRequest('finance/getAllBank').then(function (cardList) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          cardList = _.map(cardList, function (card) {
            return {
              bankCardNumber: card.bankCardNumber,
              bank: card.bank,
              balance: card.balance,
              status: card.status
            };
          });

          self.cardList = cardList;
          self.toSearchCardList();
          self.loading = false;
          return cardList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      toSearchCardList: function () {
        var cardList = this.cardList;
        var filterData = this.getFilterData();
        if (filterData === null) {
          this.searchCardList = _.clone(cardList);
          return;
        }

        cardList = _.filter(cardList, function (card) {
          var bank = filterData.bank;
          if (bank !== undefined) {
            bank = bank.bank;
            if (card.bank !== bank) {
              return false;
            }
          }

          var status = filterData.status;
          if (status !== undefined && card.status !== status) {
            return false;
          }

          var bankCardNumber = filterData.bankCardNumber;
          if (bankCardNumber !== undefined && card.bankCardNumber.indexOf(bankCardNumber) === -1) {
            return false;
          }

          return true;
        });

        this.searchCardList = cardList;
      },

      getFilterData: function () {
        var search = this.search;
        var fields = ['bankCardNumber', 'bank', 'status'];
        var filterData = {};
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          var value = search[field];
          if (!SysUtil.isEmpty(value)) {
            filterData[field] = value;
          }
        }

        if (SysUtil.isEmptyObjct(filterData)) {
          return null;
        }
        return filterData;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.loading = true;
        var self = this;
        setTimeout(function() {
          self.toSearchCardList();
          self.oldSearch = _.cloneDeep(self.search);
          self.loading = false;
        }, 500);
      },

      addCard: function () {
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setCardList();
      },

      updateStatus: function (card, status) {
        this.loading = true;
        var self = this;
        ajaxRequest('finance/updateBank', {
          bankCardNumber: card.bankCardNumber,
          status: status
        }).then(function () {
          self.loading = false;
          var msg = status === 1 ? '启用' : '禁用';
          self.$alert(`该银行卡成功${msg}`, '信息', {
            callback: function () {
              self.setCardList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      CardForm: CardForm
    }
  });

</script>

<style>
  .bank-card-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .bank-card-setting .card-setting-table-div {
    flex: 1;
    overflow: auto;
  }

  .bank-card-setting .card-setting-table-div .el-button+.el-button {
    margin-left: 0;
  }

  .bank-card-setting-dialog {
    max-width: 500px;
    min-width: 300px;
  }

</style>

</html>
